<template>
  <section class='f-account'>
    <p class="f-tips">温馨提示：为避免影响您的提现申请，请认真绑定并填写真实的有效信息！</p>

    <!-- 支付宝 -->
    <!-- <section class="f-card" v-if="formData.aliLoginAccount">
      <div class="f-flex-between">
        <p style="font-weight: 400;font-size: 14px;color: #000000;">支付宝</p>
        <p style="font-weight: 400;font-size: 12px;color: #666666;" @click="openOverlay(1)">解绑</p>
      </div>

      <div class="f-card-bg f-zfb">
        <p>支付宝</p>
        <p style="margin-top:2px">{{formData.aliLoginAccount}}</p>
      </div>
    </section>

    <section class="f-card-add f-mt-15" v-if="!formData.aliLoginAccount">
      <p style="font-weight: 400;font-size: 14px;color: #000000;">支付宝</p>
      <div class="f-input" @click="pageJump('account/zfb')">
        <p>添加支付宝账号</p>
        <img style="width:16px;height:16px" src="@/assets/icons/account_icon_add.png" alt="">
      </div>
    </section> -->

    <!-- 微信 -->
    <!-- <section class="f-card f-mt-15">
      <div class="f-flex-between">
        <p style="font-weight: 400;font-size: 14px;color: #000000;">微信</p>
        <p style="font-weight: 400;font-size: 12px;color: #666666;">解绑</p>
      </div>

      <div class="f-card-bg f-wx">
        <p>微信</p>
        <p style="margin-top:2px">llee121</p>
      </div>
    </section> -->

    <!-- <section class="f-card-add f-mt-15">
      <p style="font-weight: 400;font-size: 14px;color: #000000;">微信</p>
      <div class="f-input">
        <p>绑定微信账号</p>
        <img style="width:16px;height:16px" src="@/assets/icons/account_icon_add.png" alt="">
      </div>
    </section> -->

    <!-- 银行卡 -->
    <section class="f-card" v-if="formData.billNo">
      <div class="f-flex-between">
        <p style="font-weight: 400;font-size: 14px;color: #000000;">银行卡</p>
        <p style="font-weight: 400;font-size: 12px;color: #666666;" @click="openOverlay(2)">解绑</p>
      </div>

      <div class="f-card-bg f-yhk">
        <p>银行卡</p>
        <p style="margin-top:2px">{{formData.billNo}}</p>
      </div>
    </section>

    <section class="f-card-add f-mt-15" v-if="!formData.billNo">
      <p style="font-weight: 400;font-size: 14px;color: #000000;">银行卡</p>
      <div class="f-input" @click="pageJump('account/yhk')">
        <p>绑定银行卡账号</p>
        <img style="width:16px;height:16px" src="@/assets/icons/account_icon_add.png" alt="">
      </div>
    </section>

    <van-overlay :show="off.overlay" @click="off.overlay = false">
      <div class="f-wrapper">
        <p style="font-weight: 500;font-size: 19px;color: #000000;">是否确认解绑</p>
        <div class="f-mt-20" style="font-weight: 300;font-size: 16px;color: #707070;">
          <p>解绑后</p>
          <p style="margin-top:2px">提现时需重新绑定账号</p>
        </div>
        <div style="padding:21px 40px 0 40px">
          <van-button round block type="primary" color="#488BFE">再想想</van-button>
          <p class="f-mt-15" style="font-weight: 300;font-size: 16px;color: #424242;" @click="handleAlipayUnbind()">确认解绑</p>
        </div>
      </div>
    </van-overlay>
  </section>
</template>
<script>
import { ref, reactive, toRefs, onMounted, watch } from 'vue';
import { useRouter, useRoute } from 'vue-router'
import { useStore } from 'vuex';
import api from '../api'
import { successDeal } from '@/utils/utils';

export default {
  setup(props, context) {
    const store = useStore()

    const router = useRouter()
    const route = useRoute();

    const state = reactive({
      off: {
        overlay: false,
      },
      type: "",

      formData: {}
    })

    onMounted(() => {
      store.commit("setNavBar", {
        title: '提现账号管理',
        show: true,
        left: true,
        leftType: 'back',
        right: false,
        rightType: 'search',
      });

      getWithdrawInfo()
    })

    const getWithdrawInfo = () => {
      api.withdrawInfo().then(res => {
        state.formData = res.data
      })
    }

    const openOverlay = (type) => {
      state.off.overlay = true
      state.type = type
    }

    const handleAlipayUnbind = () => {
      if (state.type == 1) {
        api.alipayUnbind().then(res => {
          successDeal('支付宝解绑成功！')
          getWithdrawInfo()
          state.off.overlay = false
        })
      }
      if (state.type == 2) {
        api.bankUnbind().then(res => {
          successDeal('银行卡解绑成功！')
          getWithdrawInfo()
          state.off.overlay = false
        })
      }
    }

    const pageJump = (name) => {
      router.push({
        path: `/capital/${name}`
      })
    }

    return {
      ...toRefs(state),
      handleAlipayUnbind,
      openOverlay,
      pageJump
    }
  }
}
</script>

<style lang='scss' scoped>
.f-account {
  .f-tips {
    font-weight: 300;
    font-size: 10px;
    color: #666666;
    padding: 16px 0 11px 16px;
  }
  .f-card {
    width: 375px;
    height: 141px;
    background: #ffffff;
    padding: 16px;
    .f-card-bg {
      background-size: 344px 82px;
      width: 344px;
      height: 82px;
      margin-top: 14px;
      font-weight: 500;
      font-size: 16px;
      color: #ffffff;
      padding-top: 19px;
      padding-left: 71px;
    }
    .f-zfb {
      background-image: url("@/assets/imgs/zfb_account_bg.png");
    }
    .f-wx {
      background-image: url("@/assets/imgs/wx_account_bg.png");
    }
    .f-yhk {
      background-image: url("@/assets/imgs/yhk_account_bg.png");
    }
  }
  .f-wrapper {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -60%);

    width: 305px;
    background: #ffffff;
    border-radius: 7px;
    text-align: center;
    padding: 20px 0;
  }
  .f-card-add {
    width: 375px;
    height: 141px;
    background: #ffffff;
    padding: 16px;
    .f-input {
      width: 340px;
      height: 46px;
      border: 1px solid #aaaaaa;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-weight: 500;
      font-size: 12px;
      color: #424242;
      padding: 0 13px;
      margin-top: 34px;
    }
  }
}
</style>